<!-- 购物卡结佣管理-购物卡结佣-->
<template>
  <div class="bankNameSet">
    <el-form :inline="true" :model="ruleForm" ref="ruleForm">
      <el-form-item label="联行号：">
        <el-input v-model="ruleForm.linkNumber" placeholder="请输入联行号："></el-input>
      </el-form-item>
      <el-form-item label="支行名称：">
        <el-input v-model="ruleForm.bankBranchName" placeholder="请输入支行名称"></el-input>
      </el-form-item>
      <el-form-item label="省/市">
        <el-select filterable @change="cityChange" v-model="ruleForm.provinceId" placeholder="请选择">
          <el-option
            v-for="item in provincesList"
            :key="item.provinceid"
            :label="item.province"
            :value="item.provinceid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区/县">
        <el-select filterable v-model="ruleForm.cityId" placeholder="请选择">
          <el-option
            v-for="item in cityList"
            :key="item.cityId"
            :label="item.city"
            :value="item.cityId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属银行">
        <el-select filterable v-model="ruleForm.bankId" placeholder="请选择">
          <el-option
            v-for="item in bankList"
            :key="item.bankCode"
            :label="item.bankName"
            :value="item.bankCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作时间：">
        <el-date-picker
          v-model="time"
          unlink-panels
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="yyyy - MM - dd HH:mm"
          value-format="yyyy-MM-dd HH:mm"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" id="monitorEnter">查询</el-button>
        <el-button @click="onClear">重置</el-button>
        <el-button @click="add">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
      <el-table-column align="center" prop="linkNumber" label="联行号"></el-table-column>
      <el-table-column align="center" prop="bankBranchName" label="支行名称"></el-table-column>
      <el-table-column align="center" prop="bankName" label="所属银行"></el-table-column>
      <el-table-column align="center" prop="openCode" label="开户编码"></el-table-column>
      <el-table-column align="center" prop="provinceName" label="省份"></el-table-column>
      <el-table-column align="center" prop="cityName" label="市县"></el-table-column>
      <el-table-column align="center" prop="address" label="地址"></el-table-column>
      <el-table-column align="center" prop="userName" label="操作人"></el-table-column>
      <el-table-column align="center" prop="updateTime" label="操作时间">
        <template slot-scope="scope">
          <span>{{upTime(scope.row.updateTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="editRow(scope.row.id)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteRow(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        :current-page.sync="ruleForm.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="ruleForm.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 新增 -->
    <el-dialog :title="dialogText" :visible.sync="dialogTableVisible">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="行联号" prop="linkNumber">
          <el-input @blur="getNumber" v-model="form.linkNumber"></el-input>
        </el-form-item>
        <el-form-item label="支行名称" prop="bankBranchName">
          <el-input v-model="form.bankBranchName"></el-input>
        </el-form-item>
        <el-form-item label="银行" prop="bankId">
          <el-select filterable v-model="form.bankId" @change="selectbankName" placeholder="请选择">
            <el-option
              v-for="item in bankList"
              :key="item.bankCode"
              :label="item.bankName"
              :value="item.bankCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省" prop="provinceId">
          <el-select
            filterable
            @change="provinceidChange"
            v-model="form.provinceId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in provincesList"
              :key="item.provinceid"
              :label="item.province"
              :value="item.provinceid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="cityId">
          <el-select filterable @change="newsCtiyChange" v-model="form.cityId" placeholder="请选择">
            <el-option
              v-for="item in cityList"
              :key="item.cityId"
              :label="item.city"
              :value="item.cityId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区/县" prop="areaId">
          <el-select filterable v-model="form.areaId" @change="areaChange" placeholder="请选择">
            <el-option
              v-for="item in cityAreaList"
              :key="item.areaId"
              :label="item.area"
              :value="item.areaId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="开户编码">
          <span>{{form.openCode}}</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">保存</el-button>
          <el-button @click="resetForm('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import api from "@/api/apiPath";
import utils from "@/common/utils";
export default {
  name: "bankNameSet",
  title:'银行数据配置',
  data() {
    return {
      bankList: [],
      provincesList: [], // 省
      cityList: [], // 市
      cityAreaList: [], // 区县
      tableData: [],  // 表格数据
      dialogText: "新增",
      dialogTableVisible: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      time: [],
      ruleForm: {
        linkNumber: "",
        bankBranchName: "",
        provinceId: "",
        cityId: "",
        beginTime: "",
        endTime: "",
        pageSize: 10,
        pageNum: 1
      },
      form: {
        id: '',
        bankName: "", // 银行名称
        provinceName: "", // 省份名称
        cityName: "", // 市区名称
        areaName: "", // 县，县级市，区名称
        linkNumber: "",
        bankBranchName: "",
        provinceId: "",
        cityId: "",
        areaId: "",
        address: "",
        openCode: ""
      },
      rules: {
        linkNumber: [
          { required: true, message: "请输入联行号", trigger: "blur" }
        ],
        bankBranchName: [
          { required: true, message: "请输入支行名称", trigger: "blur" }
        ],
        bankId: [
          { required: true, message: "请选择银行", trigger: "change" }
        ],
        provinceId: [
          { required: true, message: "请选择省份", trigger: "change" }
        ],
        cityId: [
          { required: true, message: "请选择市区", trigger: "change" }
        ],
        areaId: [
          { required: true, message: "请选择县", trigger: "change" }
        ]
      },
      total: 400
    };
  },
  created() {
    this.init();
    this.list();
  },
  activated(){
    this.onSearch();
  },
  methods: {
    // 获取开户编码
    getNumber() {
      this.form.openCode = this.form.linkNumber.substring(3, 7);
    },
    // 获取省名
    selectbankName(id) {
      let selectedWorkName = {};
      selectedWorkName = this.bankList.find(item => {
        return item.bankCode === id;
      });
      this.form.bankName = selectedWorkName.bankName;
    },
    // 省查市
    provinceidChange(val) {
      this.axios.get(`${api.GETCITY}/${val}`).then(data => {
        let res = data.data;
        if (res.code === 200) {
          this.cityList = res.data.cityList;
        }
      });
      let selectedWorkName = {};
      selectedWorkName = this.provincesList.find(item => {
        return item.provinceid === val;
      });
      this.form.provinceName = selectedWorkName.province;
    },
    // 市查区县
    newsCtiyChange(val) {
      this.axios.get(`${api.GETAREA}/${val}`).then(data => {
        let res = data.data;
        if (res.code === 200) {
          this.cityAreaList = res.data.cityArealist;
        }
      });
      let selectedWorkName = {};
      selectedWorkName = this.cityList.find(item => {
        return item.cityId === val;
      });
      this.form.cityName = selectedWorkName.city;
    },
    // 县查id和名字
    areaChange(val) {
      let selectedWorkName = {};
      selectedWorkName = this.cityAreaList.find(item => {
        return item.areaId === val;
      });
      this.form.areaName = selectedWorkName.area;
    },
    // 转换时间
    upTime(time) {
      return utils.getTimeString(time);
    },
    cityChange(val) {
      this.axios.get(`${api.GETCITY}/${val}`).then(data => {
        let res = data.data;
        if (res.code === 200) {
          this.cityList = res.data.cityList;
        }
      });
    },
    // 提交按钮
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.dialogTableVisible = false;
          console.log(this.form.id);
          debugger;
          if(this.form.id) {
            let obj = {},obj2 ={},obj3 = {},obj4 = {};
            obj = this.bankList.find(item => {
              return item.bankCode === this.form.bankId
            })
            obj2 = this.provincesList.find(item => {
              return item.provinceid === this.form.provinceId
            })
            obj3 = this.cityList.find(item => {
              return item.cityId === this.form.cityId
            })
            obj4 = this.cityAreaList.find(item => {
              return item.areaId === this.form.areaId
            })
            this.form.bankName = obj.bankName; // 银行名称
            this.form.provinceName = obj2.province; // 省份名称
            this.form.cityName = obj3.city; // 城市名称
            this.form.areaName = obj4.area; // 区县名称
            // 修改
            this.axios.post(api.updateBankBranch,this.form).then(data=>{
              let res = data.data;
                if (res.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功"
                  });
                  this.$refs[formName].resetFields();
                  this.list()
                } else {
                  this.$message(res.msg);
                }
                this.form.id = ''
            })
          } else {
            this.axios.post(api.addBankBranch, this.form).then(data => {
              let res = data.data;
              if (res.code === 200) {
                this.$message({
                  type: "success",
                  message: "操作成功"
                });
                this.$refs[formName].resetFields();
                this.list()
              } else {
                this.$message(res.msg);
              }
            });
          }
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.form = {
        provinceId: '',
        cityId: '',
        areaId: '', 
      },
      this.dialogTableVisible = false;
    },
    // 删除支行
    deleteRow(id) {
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios.post(api.deleteBankBranch, { id: id }).then(data => {
            let res = data.data;
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.list();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 新增按钮（清除表单数据）
    add() {
      this.form = {
        bankName: "", 
        provinceName: "", 
        cityName: "", 
        areaName: "", 
        linkNumber: "",
        bankBranchName: "",
        provinceId: "",
        cityId: "",
        areaId: "",
        address: "",
        openCode: ""
      },
      this.dialogText = "新增"
      this.dialogTableVisible = true;
    },
    // 编辑
    editRow(id) {
      this.dialogText = "编辑";
      this.form.id = id;
      this.axios
        .post(api.selectBankBranchById, { id: id })
        .then(data => {
          let res = data.data;
          if (res.code === 200) {
            this.form.linkNumber = res.data.linkNumber;
            this.form.bankBranchName = res.data.bankBranchName;
            this.form.bankId = res.data.bankId;
            this.form.provinceId = res.data.provinceId;
            this.form.address = res.data.address;
            this.form.openCode = res.data.openCode;
            this.dialogTableVisible = true;
            return res.data;
          }
        })
        .then(res => {
          this.axios
            .get(`${api.GETCITY}/${res.provinceId}`)
            .then(data => {
              let resr = data.data;
              if (resr.code === 200) {
                this.cityList = resr.data.cityList;
              }
              this.form.cityId = res.cityId;
              return res.cityId;
            })
            .then(id => {
              this.axios.get(`${api.cityAreaList}/${id}`).then(data => {
                let resr = data.data;
                if (resr.code === 200) {
                  this.cityAreaList = resr.data.cityArealist;
                }
                this.form.areaId = res.areaId;
              });
            });
        });
    },
    handleSizeChange(size) {
      this.ruleForm.pageSize = size;
      this.list();
    },
    handleCurrentChange(page) {
      this.ruleForm.pageNum = page;
      this.list();
    },
    list() {
      this.axios.post(api.bankBranchPageList, this.ruleForm).then(data => {
        let res = data.data;
        if (res.code === 200) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    init() {
      // 省份
      this.axios.get(api.GETPROVINCES, {}).then(data => {
        let res = data.data;
        if (res.code === 200) {
          this.provincesList = res.data;
        }
      });
      // 银行
      this.axios.post(api.GETBANKALL, {}).then(data => {
        let res = data.data;
        if (res.code === 200) {
          this.bankList = res.data;
        }
      });
    },
    // 查询
    onSearch() {
      this.ruleForm.pageNum = 1;
      let [startTime, endTime] = this.time;
      this.ruleForm.beginTime = new Date(startTime).getTime();
      this.ruleForm.endTime = new Date(endTime).getTime();
      this.list();
    },
    // 重置
    onClear() {
      (this.ruleForm = {
        linkNumber: "",
        bankBranchName: "",
        provinceId: "",
        cityId: "",
        beginTime: "",
        endTime: "",
        pageSize: 10,
        pageNum: 1
      }),
      (this.time = []);
      this.list();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.demo-ruleForm {
  .el-input, .el-select {
    width: 300px;
  }
}

.pages {
  margin: 15px auto;
  text-align: right;
}
</style>
